<template>
    <view class="main" :style="themeColor">
        <view>充值金额(元)</view>
        <view class="big">{{ userMoneyLog.Money }}</view>
        <view v-if="userMoneyLog.State == 1">充值成功</view>
        <view v-if="userMoneyLog.State == 2" class="color-danger">审核未通过</view>
        <view class="list">
            <view
                ><text class="left">付款方式</text><text>{{ userMoneyLog.PayWayName }}</text></view
            >
            <view v-if="bankList[0].BankTypeName"
                ><text class="left">付款银行</text
                ><text>{{ bankList[0].BankTypeName }}({{ bankList[0].Branch }})</text></view
            >
            <view v-if="bankList[0].Number"
                ><text class="left">付款账号</text><text>{{ bankList[0].Number }}</text></view
            >
            <view v-if="bankList[0].AccountName"
                ><text class="left">收款账户</text><text>{{ bankList[0].AccountName }}</text></view
            >
            <view
                ><text class="left">创建时间</text><text>{{ userMoneyLog.AddTime }}</text></view
            >
            <view
                ><text class="left">订单号</text><text>{{ applyLog.ApplyMessage }}</text></view
            >

            <view class="imglist" v-if="imageList.length > 0">
                <text class="left">线下凭证</text>
                <view class="imgs" v-for="item in imageList">
                    <image :data-src="easyGetImgUrl(item)" @tap="previewImage" :src="item" mode=""></image>
                </view>
            </view>

            <view v-if="userMoneyLog.Remark"
                ><text class="left">备注</text><text>{{ userMoneyLog.Remark }}</text></view
            >
            <view v-if="userMoneyLog.State == 2"
                ><text class="left">驳回理由</text><text>{{ applyLog.CheckMessage || "未填写" }}</text></view
            >
        </view>
        <!-- 	   <view class="page">
		        <view class="tac mt-lg fs-xs">
		            <view>充值金额(元)</view>
		            <text class="fs-xl mt-xs">{{applyLog.Money}}</text>

		            <view>{{model.StateName}}</view>
		        </view>
		        <view class="br bg-white pd mar fs-xs">
		            <view class="flex-v-c">
		                <view class="wealth-detail-title">付款方式</view>
		                <view class="flex1">{{model.PayWayName}}</view>
		            </view>
		            <view class="flex-v-c" v-show="model.PayInfoObj.BankTypeName">
		                <view class="wealth-detail-title">付款银行</view>
		                <view class="flex1">{{model.PayInfoObj.BankTypeName}}({{model.PayInfoObj.Branch}})</view>
		            </view>
		            <view class="flex-v-c" v-show="model.PayInfoObj.Number">
		                <view class="wealth-detail-title">付款账号</view>
		                <view class="flex1">{{model.PayInfoObj.Number}}</view>
		            </view>
		            <view class="flex-v-c" v-show="model.PayInfoObj.AccountName">
		                <view class="wealth-detail-title">收款账户</view>
		                <view class="flex1">{{model.PayInfoObj.AccountName}}</view>
		            </view>
		            <view class="flex-v-c">
		                <view class="wealth-detail-title">创建时间</view>
		                <view class="flex1">{{model.AddTime}}</view>
		            </view>
		            <view class="flex-v-c">
		                <view class="wealth-detail-title">订单号</view>
		                <view class="flex1">{{(model.Remark||'').substr(0,21)}}</view>
		            </view>
		
		            <view class=" wealth-detail-img-box">
		                <view class="flex-v-c">
		                    <view class="wealth-detail-title">线下凭证</view>
		                   <ul class="upload-img upload-img--no-up pl-xs pr-xs">
		                        <li ng-repeat="item in images">
		                            <a data-fancybox="group" ng-href="{{item|get_image_url}}">
		                                <span style="background-image: url({{item|get_image_url}});"></span>
		                            </a>
		                        </li>
		                    </ul>
		                </view>
		                <view class="flex-v-c" v-show="model.NewRemark">
		                    <view class="wealth-detail-title">备注</view>
		                    <view class="flex1">{{model.NewRemark}}</view>
		                </view>
		            </view>
		            <view class="flex-v-c" v-show="ApplyInfo&&ApplyInfo.Status==2">
		                <view class="wealth-detail-title">驳回理由</view>
		                <view class="flex1 color-danger">{{ApplyInfo.CheckMessage||"未填写"}}</view>
		            </view>
		        </view>
		    </view> -->
    </view>
</template>

<script>
import { uploadImage } from "@/service/api/file.js"
import { GetInitRechargeDetail } from "@/service/api/member.js"
export default {
    components: {},
    data() {
        return {
            showBank: null,
            imageList: [],
            id: null,
            applyLog: {},
            bankList: [],
            userMoneyLog: {},
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.GetInitRechargeDetail()
    },
    methods: {
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.model.Images,
            })
        },
        GetInitRechargeDetail() {
            let parms = {
                id: this.id,
                type: 1,
                initBank: true,
            }
            GetInitRechargeDetail(parms).then((res) => {
                if (res.State) {
                    this.applyLog = res.Data.ApplyLog
                    this.bankList = res.Data.BankList
                    this.userMoneyLog = res.Data.UserMoneyLog
                    if (res.Data.ApplyLog.ApplyMessage == res.Data.UserMoneyLog.Remark) {
                        this.userMoneyLog.Remark = ""
                    }
                    if (res.Data.UserMoneyLog.Images) {
                        this.imageList = res.Data.UserMoneyLog.Images.split(",")
                    }
                }
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f1f1f1;
}
.container {
    padding: $app-page-padding;
}
.color-warning {
    color: #ff9500 !important;
}
.color-danger {
    color: #ff3b30 !important;
}
.main {
    text-align: center;
    font-size: 24rpx;
    color: #333333;
    padding: 40rpx 30rpx 40rpx 30rpx;
    & > view {
        padding: 5rpx 0;
    }
    .big {
        font-size: 48rpx;
    }
    .list {
        text-align: left;
        padding: 30rpx;
        background: #ffffff;
        border-radius: 10rpx;
        margin-top: 40rpx;
        & > view {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .left {
            width: 160rpx;
            flex-shrink: 0;
            line-height: 2.5;
        }
        .imglist {
            padding: 30rpx 0;
            margin: 30rpx 0;
            border-top: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            .imgs {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                image {
                    width: 160rpx;
                    height: 160rpx;
                    margin-right: 10rpx;
                    margin-bottom: 10rpx;
                }
            }
        }
    }
}
</style>
